<template>
<!-- 底部选项卡开始 -->
  <van-tabbar v-model="active" class="active_tab" fixed>
      <van-tabbar-item
        v-for="(item, index) in tabbars"
        :key="index"
        @click="tab(index, item.name)"
      >
        <span :class="currIndex == index ? active : ''">{{ item.title }}</span>
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? item.active : item.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
        <!-- 底部选项卡结束 -->
</template>
<script>
export default {
  data(){
    return{
      currIndex: 0,
      active:0,//默认底部选项卡变量
      tabbars: [
        {
          name: "/",
          title: "首页",
          active: require("../assets/icon_home_cook_image.png"),
          inactive: require("../assets/icon_home_cook_normal_image.png")
        },
        {
          name: "classroom",
           title: "课堂",
           active: require("../assets/icon_home_course_image.png"),
           inactive: require("../assets/icon_home_course_normal_image.png")
        },
        {
          name: "food",
          title: "晒美食",
          active: require("../assets/icon_home_note_image.png"),
          inactive: require("../assets/icon_home_note_normal_image.png")
        },
        {
          name: "login",
          title: "我的",
          active: require("../assets/icon_home_mine_image.png"),
          inactive: require("../assets/icon_home_mine_normal_image.png")
        },
      ],
    }
  },
  methods: {
     tab(index, val) {
      this.currIndex = index;
      this.$router.push(val);//选项卡的路由跳转
    },
  },
}
</script>
<style>
.active_tab img {
  display:block ;
  width: 26px;
  height: 26px !important;
}
.van-tabbar-item--active{
  color:#fc5566 !important ;
}
</style>